<template>
  <div id="Songlist">
    <div class="container">
      <div class="header">
        <span class="bobafont bobamusic-prev" @click="$router.back(-1)"></span>
        <p>歌单广场</p>
      </div>
      <van-tabs
        v-model="active"
        :swipeable="true"
        :sticky="true"
        :animated="true"
        :duration="0.5"
        background="#acf6ef"
      >
        <van-tab title="华语">
          <div class="mvlist">
            <div
              v-for="(item, index) in list"
              :key="index"
              @click="goSonglistinformation(item)"
            >
              <div class="mvpicture">
                <img :src="item.coverImgUrl+'?param=100y100'" width="100%" height="100%" />
              </div>
              <div class="mvbrief">{{ item.name }}</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="流行"
          ><div class="mvlist">
            <div
              v-for="(item, index) in list1"
              :key="index"
              @click="goSonglistinformation(item)"
            >
              <div class="mvpicture">
                <img :src="item.coverImgUrl+'?param=100y100'" width="100%" height="100%" />
              </div>
              <div class="mvbrief">{{ item.name }}</div>
            </div>
          </div>
          </van-tab
        >
        <van-tab title="民谣"
          ><div class="mvlist">
            <div
              v-for="(item, index) in list3"
              :key="index"
              @click="goSonglistinformation(item)"
            >
              <div class="mvpicture">
                <img :src="item.coverImgUrl+'?param=100y100'" width="100%" height="100%" />
              </div>
              <div class="mvbrief">{{ item.name }}</div>
            </div>
          </div>
          </van-tab
        >
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { TopPlayList } from "network/api/RecommendApi";
export default {
  data() {
    return {
      active: 0,
      list: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
    };
  },
  methods: {
    goSonglistinformation(item) {
      this.$router.push({ name: "songlistinformation",params:{item}});
      console.log(item);
    },
  },
  mounted() {
    TopPlayList("华语",30).then((res) => {
      console.log(res);
      this.list = res.data.playlists
    });
    TopPlayList("流行",30).then((res) => {
      console.log(res);
      this.list1 = res.data.playlists
    });
    TopPlayList("民谣",30).then((res) => {
      console.log(res);
      this.list3 = res.data.playlists
    });
  }
};
</script>

<style>
#Songlist .container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 2;
}
#Songlist .container .header {
  width: 100%;
  height: 50px;
  background: #acf6ef;
  display: flex;
}
#Songlist .container .header .bobafont {
  color: #fff;
  font-size: 27px;
  line-height: 50px;
  margin-left: 10px;
}
#Songlist .container .header p {
  color: #fff;
  font-size: 19px;
  margin-left: 10px;
  margin-top: 16px;
}
#Songlist .container .mvlist {
  margin-top: 10px;
  width: 100%;
  /* height: 563px; */
  background: #e5faf8;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 0px;
  padding-top: 10px;
}
#Songlist .container .mvlist div {
  width: 28%;
  height: 140px;
  /* background: hotpink; */
}
#Songlist .container .mvlist div .mvpicture {
  width: 100%;
  height: 100px;
  /* background: blue; */
}
#Songlist .container .mvlist div .mvpicture img {
  border-radius: 10px;
}
#Songlist .container .mvlist div .mvbrief {
  margin-top: 5px;
  width: 100%;
  height: 26px;
  /* background: green; */
  font-size: 10px;
  color: #2ae0c8;
  overflow: hidden; /*溢出的部分隐藏*/
  text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本*/
  display: -webkit-box;
  -webkit-line-clamp: 2; /*显示两行*/
  -webkit-box-orient: vertical; /*从上向下垂直排列*/
}
</style>